<template>
  <div class="w-full h-full" ref="subsidiaryChartRef"> </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
defineOptions({ name: 'RepStationFestivalBar' })
const subsidiaryChartRef = ref()
function init(data) {
  const {
    stationFestivalX,
    top5,
    avgTop5,
    startColor = '#1B76FF',
    endColor = '#1B76FF',
    isAverage = false,
    isLast = false
  } = data
  const xData = stationFestivalX
  const originalValue = top5.map((ele) => ele.value)
  const markLine = !isAverage || {
    symbol: 'none',
    silent: true,
    label: {
      show: true,
      position: 'end',
      formatter: '平均损耗率{c}',
      fontSize: 14,
      fontWeight: 'bold',
      offset: [-100, -10]
    },
    lineStyle: {
      type: 'dashed'
    },
    data: [
      {
        yAxis: avgTop5.value,
        lineStyle: {
          color: '#FF803B'
        },
        label: {
          color: '#FF803B'
        }
      }
    ]
  }
  const title = isLast ? '节超量（后五）' : '节超量（前五）'
  var myChart = echarts.init(subsidiaryChartRef.value)
  // 指定图表的配置项和数据
  var option = {
    grid: {
      top: 30,
      right: 30,
      bottom: 30,
      left: 80
    },

    tooltip: {},
    legend: {
      data: [title],

      itemWidth: 10,
      itemHeight: 10,
      itemStyle: {
        borderRadius: 10
      },
      textStyle: {
        fontSize: '14px',
        color: startColor
      }
    },
    xAxis: {
      data: xData,
      axisLabel: {
        rotate: 20,
        color: '#666',
        formatter: function (value) {
          if (value.length > 4) {
            return value.substring(0, 4) + '...' // 截断并添加省略号
          }
          return value
        },
        overflow: 'truncate'
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      }
    },
    yAxis: {
      nameTextStyle: {
        color: '#666',
        fontSzie: '14px'
      },
      axisLabel: {
        formatter: '{value}方'
      }
    },
    series: [
      {
        name: title,
        type: 'bar',
        data: originalValue,
        barWidth: 20,
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: endColor },
            { offset: 1, color: startColor }
          ]),
          borderRadius: 4
        },
        markLine: markLine
      }
    ]
  }
  console.log('optiis', option)
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

defineExpose({ init })
</script>
